<template>
  <div class="add">
    <button @click="addCounter(1)">+1</button>
    <button @click="addCounter(5)">+5</button>
    <button @click="addCounter(10)">+10</button>
  </div>
</template>

<script>
  export default {
    // 子组件向父组件传值,父组件在使用时会有代码提示这个事件
    // emits数组语法
    // emits: ["add"],
    // emits对象语法
    emits: {
      // 不做校验
      // add: null
      // 做校验
      add: function (value) {
        if (value <= 10) {
          return true
        }else {
          console.warn(`add 事件参数有误: ${value}`)
          return false
        }
      }
    },
    methods: {
      // 让子组件发出去一个自定义事件，让父组件监听这个事件
      addCounter(value) {
        this.$emit('add', value)
      },
    }
  }
</script>

<style scoped>
</style>